<template>
  <div class="account">
    <UnLogin v-if="!hasLogin"></UnLogin>
    <div v-if="hasLogin" class="user-info flex flex-column flex-align-items-center">
      <div class="img">
        <van-image :src="require('@/assets/images/tl.png')" width="13" height="16" />
        <van-image :src="require('@/assets/images/logo.png')" width="68" height="22" alt="" />
        <van-image :src="require('@/assets/images/tr.png')" width="13" height="16" />
      </div>
      <div class="header">
        <van-image v-if="user.avatar&&user.avatar.startsWith('http')" :src="user.avatar" width="80" height="80" round />
        <van-image v-else :src="domain + user.avatar" width="80" height="80" round />
      </div>
      <div class="username">{{ user.username }}</div>
      <div class="phone">{{ user.mobile }}</div>
      <div class="phone" style="font-size:14px">Saldo: <span>{{user.balance | num2Money}}</span> KZ</div>
    </div>
    <div v-if="hasLogin" class="account-item">
      <van-cell-group style="width:100%">
        <van-cell title="Carregue conta" is-link to="/charge"></van-cell>
        <van-cell title="Produtos Publicados" is-link to="/send"></van-cell>
        <van-cell title="Informações pessoais" is-link to="/profile"></van-cell>
        <van-cell title="Pagamentos" is-link to="/consume"></van-cell>
      </van-cell-group>
      <div class="out" @click="out">Sair</div>
    </div>
  </div>
</template>
<script>
import { isLogin } from "@/utils";
import UnLogin from "@/components/unlogin";
import Api from "@/api";
import { Domain } from "@/constants";
export default {
  name: "Account",
  components: { UnLogin },
  data() {
    return {
      hasLogin: false,
      domain: Domain,
      user: {},
    };
  },
  created() {
    this.hasLogin = isLogin();
    this.hasLogin && this.loadUserInfo();
  },
  methods: {
    loadUserInfo() {
      Api.loadUser().then((res) => {
        this.user = res;
      });
    },
    out(){
      this.$dialog.confirm({
        title:window.$lang.t('component.head.6'),
        message: window.$lang.t('component.head.5'),
      })
        .then(() => {
          window.localStorage.removeItem('TOKEN');
          this.$toast({
            type: 'success',
            message: this.$t('component.head.7'),
          });
          this.$router.push('/')
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>
<style lang="less" scoped>
.account{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.user-info {
  height: 300px;
  background: linear-gradient(134deg, #ffa057 0%, #fb6124 100%);
  .img {
    margin-top: 32px;
    .van-image {
      &:nth-child(2) {
        margin: 0 10px;
      }
    }
  }
  .desc {
    color: #ffecdb;
    font-size: 14px;
    margin-top: 10px;
  }
  .header {
    margin-top: 24px;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      width: 80px;
      height: 80px;
      left: -4px;
      top: -4px;
      border-radius: 100%;
      border: 4px solid rgba(255, 255, 255, 0.2);
    }
    &::after {
      content: "";
      position: absolute;
      width: 100px;
      height: 100px;
      left: -10px;
      top: -10px;
      border-radius: 100%;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
  }
  .username {
    font-weight: bold;
    font-size: 18px;
    color: #fff;
    margin-top: 20px;
  }
  .phone {
    margin-top: 10px;
    font-size: 12px;
    color: #fff;
  }
}
.account-item{
  flex: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 30px;
  .out{
    color: #fb8c24;
    letter-spacing: 1px;
    font-size: 12px;
    font-weight: 900;
    border-bottom: 2px solid #fb8c24;
    padding-bottom: 10px;
    letter-spacing: 1px;
  }
}
::v-deep.van-dialog__confirm{
  color: #fb8c24;
}
</style>
